<template>
  <!-- “课程大纲”页面的添加章节[对话框]页面，对应的步骤条是"创建课程大纲" -->
  <div>
    <!-- 从Elenment官网的Dialog 对话框，赋值[添加章节]对话框 -->
    <!-- dialogFormVisible是对话框是否显示 -->
    <el-dialog :visible.sync="dialogFormVisible" :title="title">
      <el-form :model="chapter">
        <el-form-item :label-width="formLabelWidth" label="章节标题">
          <!-- 数据库表：edu_chapter，JavaBean：Chapter，属性：title、sort、courseId -->
          <el-input v-model="chapter.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="章节排序">
          <el-input-number v-model="chapter.sort" :min="0"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <!-- :disabled="disabled"是按钮是否禁用 -->
        <el-button :disabled="disabled" type="primary" @click="saveOrUpdateChapter">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import courseApi from '@/api/course'
export default {
  data() {
    return {
      chapter: {
        sort: 0
      }, // 用来收集前端填写的章节信息
      dialogFormVisible: false, // 设置[添加章节]对话框，默认不显示
      disabled: false, // 设置[添加章节]按钮中的[确定]按钮，默认不禁用
      formLabelWidth: '80px', // 为章节标题提供边框样式
      title: '新增章节' // 因为[添加章节]按钮和[编辑]按钮共用一个对话框，为了让对话框的左上角标题做出区分，进行动态取值
    }
  },
  methods: {
    // 打开[添加章节]对话框的函数
    open() {
      this.dialogFormVisible = true
    },
    // 关闭[添加章节]对话框的函数，同时也是[添加章节]按钮中的[取消]按钮的函数
    close() {
      this.dialogFormVisible = false
    },
    // [添加章节]按钮和[编辑]按钮【两个共用一个对话框】，弹出的对话框中的[确定]按钮的单击响应事件
    saveOrUpdateChapter() {
      // 点击[确定]按钮后，禁用此按钮，防止重复提交
      this.disabled = true
      // 判断点击提交按钮时的操作是更新还是新增
      if (this.chapter.id) {
        // 当存在章节id时，就表示数据库已经有章节信息，进行更新
        this.updateChapter()
      } else {
        // 当不存在章节id时，就表示数据库没有章节信息，进行新增
        this.saveChapter()
      }
    },
    // 新增章节，提交【新增或者更新】章节的函数， [添加章节]按钮中的[确定]按钮
    saveChapter() {
      /*
      因为chapter: {}前端收集到的章节信息，只有章节标题、章节排序
      但是数据库表：edu_chapter，JavaBean：Chapter类，属性：title、sort、courseId
      所以在给后端发送请求的时候，还需要将章节绑定到自己的课程中，也就是获取courseId
      因为From.vue的父组件是Chapter，Chapter的父组件是from.vue
      而courseId保存在from.vue中
      this.$parent.$parent表示取的是父组件的父组件
      */
      this.chapter.courseId = this.$parent.$parent.courseId
      // 向后端发送请求
      courseApi.saveChapter(this.chapter)
        .then(response => {
          // 当请求成功，给出提示信息
          this.$message.success('章节新增成功')
          // 关闭对话框
          this.close()
          // 当点击[确定]按钮时，
          // 设置提交按钮可用，重置收集章的表单
          this.disabled = false
          this.chapter = {
            sort: 0
          }
          // 刷新Chapter/index页面中的章节列表
          this.$parent.getChapterNestedList()
        })
    },
    // 更新章节
    updateChapter() {
      // this.title = '更新章节'
      // 不能写在这个事件里面，因为[编辑]按钮的单击响应事件是在index.vue中编写，它的方法是showUpdateChapterDialog(chapterId)，它调用的是getChapter(chapterId)
      // 进行更新操作，说明chapter必须包含id
      courseApi.updateChapter(this.chapter)
        .then(response => {
          // 当请求成功，给出提示信息
          this.$message.success('章节更新成功')
          // 关闭对话框
          this.close()
          // 当点击[确定]按钮时，
          // 设置提交按钮可用，重置收集章的表单
          this.disabled = false
          this.chapter = {
            sort: 0
          }
          // 刷新Chapter/index页面中的章节列表
          this.$parent.getChapterNestedList()
        })
    },
    // 根据id查询章节，以便更新时进行回显
    getChapter(chapterId) {
      this.title = '更新章节'
      courseApi.getChapter(chapterId).then(response => {
        // 将查询到的章节对象信息，赋值给当前Vue对象的chapter，进行渲染到div容器，也就是赋值对话框页面[Form.vue显示]
        this.chapter = response.data.item
        // 打开对话框，进行数据回显
        this.open()
      })
    }
  }
}
</script>
